<!DOCTYPE html>
<html>
<head>
    <title>百度前端技术学院jstask8</title>
    <style type="text/css">
        div{
            display: inline-flex;
            flex-wrap: wrap;
            border: 1px solid black;
            padding: 20px;
            margin:10px;
            background-color: white;
        }

    </style>
</head>
<body>
<div id="all">everything
    <div class="items" id="book">books
        <div class="book">book1</div>
        <div class="book">book2</div>
        <div class="book">book3</div>
    </div>
    <div class="items" id="song">songs
        <div class="song">song1</div>
        <div class="song">song2</div>
        <div class="song">song3</div>
    </div>
    <div class="items" id="drink">drinks
        <div class="drink">drink1</div>
        <div class="drink">drink2</div>
        <div class="drink">drink3</div>
    </div>
</div></br>
<input type="button" name="order" value="order">
<input type="text" name="search">
<input type="button" name="search" value="search">
<script type="text/javascript">
    var everything = document.getElementsByClassName("all");
    var items = document.getElementsByClassName("items");
    var list = [];
    var button = document.getElementsByTagName("input")[0];
    var timer;
    var searchb = document.getElementsByTagName("input")[2];

    button.onclick = function (){
        reset();
        preOrder();
        change();
    }
    searchb.onclick = function(){
        reset();
        preOrder();
        search();
    }

    function preOrder(){
        list.push(all);
        for (var i = 0; i < items.length; i++) {
            list.push(items[i]);
            var item = items[i].children
            for (var j = 0; j < item.length; j++) {
                list.push(item[j]);
            }
        }
    }

    function change(){
        var i = 0;
        list[i].style.backgroundColor = "grey";
        console.log(list.length);

        timer = setInterval(
            function (){
                if (i<list.length-1) {
                    i++;
                    list[i-1].style.backgroundColor = "white";
                    list[i].style.backgroundColor = "grey";
                    console.log(list[i]);
                    console.log(i);

                }else{
                    list[i].style.backgroundColor = "white";
                    clearTimeout(timer);
                }
            },700);
    }

    function reset(){
        list = [];
        clearTimeout(timer);
        var divs = document.getElementsByTagName("div");
        console.log(divs);
        for (var i = 0; i < divs.length; i++) {
            divs[i].style.backgroundColor = "white";
        }

    }

    function search(){
        var i = 0;
        list[i].style.backgroundColor = "grey";
        var input = document.getElementsByTagName("input")[1].value;
        var re = new RegExp("^"+input,"g");
        console.log(re);
        timer = setInterval(
            function (){
                if (i<list.length-1 && !re.test(list[i].innerHTML)) {
                    i++;
                    list[i-1].style.backgroundColor = "white";
                    list[i].style.backgroundColor = "grey";

                }
                else if(re.test(list[i].innerHTML)){
                    list[i].style.backgroundColor = "blue";
                    alert("find it!");
                    clearTimeout(timer);
                }
                else if (i !== list.length - 1) {
                    console.log("list[i]:"+list[i].innerHTML);
                    clearTimeout(timer);
                } else {
                    list[i].style.backgroundColor = "white";
                    alert("cant find it .")
                    clearTimeout(timer);
                }
            },700);
    }

</script>
</body>
</html>